<template>
  <div class="personal-center-container">
    <el-row :gutter="20">
      <el-col>
        <vab-card shadow="hover">
          <el-tabs v-model="activeName">
            <el-tab-pane label="账号信息" name="first">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form
                  ref="accountFormRef"
                  label-width="80px"
                  :model="accountForm"
                  :rules="accountFormRules"
                >
                  <el-form-item label="用户名" prop="name">
                    <el-input v-model="accountForm.name" />
                  </el-form-item>
                  <el-form-item label="手机号" prop="mobile">
                    <el-input v-model="accountForm.mobile" />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onAccountSubmit">
                      保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
            <el-tab-pane label="修改密码" name="second">
              <el-col :lg="12" :md="16" :sm="24" :xl="12" :xs="24">
                <el-form
                  ref="passwordFormRef"
                  label-width="80px"
                  :model="passwordForm"
                  :rules="rules"
                >
                  <el-form-item label="原始密码" prop="oldpassword">
                    <el-input
                      v-model="passwordForm.oldpassword"
                      type="password"
                    />
                  </el-form-item>
                  <el-form-item label="新密码" prop="password">
                    <el-input v-model="passwordForm.password" type="password" />
                  </el-form-item>
                  <el-form-item label="确认密码" prop="renewpassword">
                    <el-input
                      v-model="passwordForm.renewpassword"
                      type="password"
                    />
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onPasswordSubmit">
                      保存
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-col>
            </el-tab-pane>
          </el-tabs>
        </vab-card>
      </el-col>
    </el-row>
    <!-- <vab-cropper ref="vabCropperRef" /> -->
  </div>
</template>

<script>
  import { defineComponent, getCurrentInstance, reactive, toRefs } from 'vue'
  import { useStore } from 'vuex'
  import { changeAccount, changePassword } from '@/api/user'
  import { useRoute, useRouter } from 'vue-router'
  import { toLoginRoute } from '@/utils/routes'
  export default defineComponent({
    name: 'PersonalCenter',
    setup() {
      const store = useStore()
      const router = useRouter()
      const route = useRoute()

      const userInfo = store.state.user

      const { proxy } = getCurrentInstance()

      const state = reactive({
        accountFormRef: null,
        passwordFormRef: null,
        vabCropperRef: null,
        activeName: 'second',
        accountForm: {
          name: userInfo.username,
          mobile: userInfo.mobile,
        },
        passwordForm: {
          oldpassword: '',
          password: '',
          renewpassword: '',
        },
        accountFormRules: {
          name: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
          mobile: [
            { required: true, trigger: 'blur', message: '请输入手机号' },
          ],
        },
        rules: {
          oldpassword: [
            { required: true, trigger: 'blur', message: '请输入原始密码' },
          ],
          password: [
            { required: true, trigger: 'blur', message: '请输入密码' },
          ],
          renewpassword: [
            { required: true, trigger: 'blur', message: '请输入确认密码' },
          ],
        },
      })

      const onAccountSubmit = () => {
        state['accountFormRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await changeAccount(state.accountForm)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await store.dispatch('user/logout')
            await router.push(toLoginRoute(route.fullPath))
            close()
          }
        })
      }

      const onPasswordSubmit = () => {
        state['passwordFormRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await changePassword(state.passwordForm)
            proxy.$baseMessage(msg, 'success', 'vab-hey-message-success')
            await store.dispatch('user/logout')
            await router.push(toLoginRoute(route.fullPath))
            close()
          }
        })
      }

      return {
        ...toRefs(state),
        onAccountSubmit,
        onPasswordSubmit,
      }
    },
  })
</script>

<style lang="scss" scoped>
  $base: '.personal-center';
  #{$base}-container {
    padding: 0 !important;
    background: $base-color-background !important;

    #{$base}-user-info {
      padding: $base-padding;
      text-align: center;

      :deep() {
        .el-avatar {
          img {
            cursor: pointer;
          }
        }
      }

      &-full-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
      }

      &-description {
        margin-top: 8px;
      }

      &-follow {
        margin-top: 15px;
      }

      &-list {
        margin-top: 18px;
        line-height: 30px;
        text-align: left;
        list-style: none;

        h5 {
          margin: -20px 0 5px 0;
        }

        :deep() {
          .el-tag {
            margin-right: 10px !important;
          }

          .el-tag + .el-tag {
            margin-left: 0;
          }
        }
      }
    }

    #{$base}-item {
      display: flex;

      i {
        font-size: 40px;
      }

      &-content {
        box-sizing: border-box;
        flex: 1;
        margin-left: $base-margin;

        &-second {
          margin-top: 8px;
        }
      }
    }
  }
</style>
